<template>
  <view class="index-box" @touchmove="handletouchmove($event)">
    <Swiper :list="bannerList"></Swiper>
    <div class="notification">
      <div class="icon">
        <img :src="icon" />
      </div>
      <div class="content">
        <uni-notice-bar class="vanNotice" scrollable single :speed="12" background-color="#dce7ff" color="#1462ff" :showIcon="false" :text="messageList">
        </uni-notice-bar>
      </div>
    </div>
    <!-- 居民业务、工商业务 -->
    <div class="business contentBox">
      <ul class="nav">
        <li v-for="(item,index) in navList" :key="index" @click="navClick(item,index)">
          <span :class="indexSelect==index?'navSelect':''">{{item.label}}</span>
        </li>
      </ul>
      <div class="navBj" :class="indexSelect==0?'leftBj':'rightBj'">
        <div></div>
      </div>
      <!-- 循环数据 -->
      <!-- <div class="entrance">
        <dl class="" v-for="(item,index) in selectList" :key="index">
          <dt @click="goDetail(item)">
            <img :src="item.url" />
          </dt>
          <dd>{{item.label}}</dd>
        </dl>
      </div> -->
      <!-- 居民业务 -->
      <div class="entrance" v-show="indexSelect==0">
        <dl class="link">
          <wx-open-subscribe class="openWx" :class="isSubscribe?'openSUbscribe':''" :template="template" id="subscribe-btn" ref="subscribeBtn">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-subscribe>
          <dt @click="detail(menu.gasStop)">
            <img :src="menu.gasStop.url" />
          </dt>
          <dd>{{menu.gasStop.label}}</dd>
        </dl>
        <dl class="link">
          <wx-open-launch-weapp class="openWx" id="gasInstall-launch-btn" :appid="appid" :username="username" path="pages/index/index.html">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-launch-weapp>
          <dt>
            <img :src="menu.gasInstall.url" />
          </dt>
          <dd>{{menu.gasInstall.label}}</dd>
        </dl>
        <!-- <wx-open-launch-weapp class="openWx" id="gasInstall-launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html">
          <script type="text/wxtag-template">
            <div style="height: 60px; width: 100%; text-align:center; ">
              <div style="height: 30px; width: 30px; margin: 0 auto; ">
                <img src="../../static/image/tqcxIcon.png" style="display: block; height: 100%; width: 100%;" />
              </div>
              <div style="height: 16px; line-height: 16px;margin-top: 15px; font-size: 13px; color: #444; ">我要开户</div>
            </div>
          </script>
        </wx-open-launch-weapp> -->
        <dl>
          <dt @click="detail(menu.ignitionGas)">
            <img :src="menu.ignitionGas.url" />
          </dt>
          <dd>{{menu.ignitionGas.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.gasApplyFor)">
            <img :src="menu.gasApplyFor.url" />
          </dt>
          <dd>{{menu.gasApplyFor.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.pipelineModification)">
            <img :src="menu.pipelineModification.url" />
          </dt>
          <dd>{{menu.pipelineModification.label}}</dd>
        </dl>
        <dl class="link">
          <wx-open-launch-weapp class="openWx" id="gasInstall-launch-btn" :appid="appid" :username="username" path="pages/index/index.html">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-launch-weapp>
          <dt>
            <img :src="menu.openUrl.url" />
          </dt>
          <dd>{{menu.openUrl.label}}</dd>
        </dl>
        <!-- <wx-open-launch-weapp class="openWx" id="openUrl-launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html">
          <script type="text/wxtag-template">
            <div style="height: 60px; width: 100%; text-align:center; ">
              <div style="height: 30px; width: 30px; margin: 0 auto; ">
                <img src="../../../static/image/tqcxIcon.png" style="display: block; height: 100%; width: 100%;" />
              </div>
              <div style="height: 16px; line-height: 16px;margin-top: 15px; font-size: 13px; color: #444; ">燃气缴费</div>
            </div>
          </script>
        </wx-open-launch-weapp> -->
        <dl>
          <dt @click="detail(menu.gasQuit)">
            <img :src="menu.gasQuit.url" />
          </dt>
          <dd>{{menu.gasQuit.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.heatingApplyFor)">
            <img :src="menu.heatingApplyFor.url" />
          </dt>
          <dd>{{menu.heatingApplyFor.label}}</dd>
        </dl>
<!--    modify start 去掉阶梯气价申请，新增一户多人口增加气量申请和低保户气价办理申请    -->
<!--        <dl>-->
<!--          <dt @click="detail(menu.ladderApplyFor)">-->
<!--            <img :src="menu.ladderApplyFor.url" />-->
<!--          </dt>-->
<!--          <dd>{{menu.ladderApplyFor.label}}</dd>-->
<!--        </dl>-->
        <dl>
          <dt @click="detail(menu.multiPeopleAddGasApplyFor)">
            <img :src="menu.multiPeopleAddGasApplyFor.url" />
          </dt>
          <dd>{{menu.multiPeopleAddGasApplyFor.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.lowIncomeApplyFor)">
            <img :src="menu.lowIncomeApplyFor.url" />
          </dt>
          <dd>{{menu.lowIncomeApplyFor.label}}</dd>
        </dl>
<!--    modify end     -->
        <dl>
          <dt @click="detail(menu.reissueTips)">
            <img :src="menu.reissueTips.url" />
          </dt>
          <dd>{{menu.reissueTips.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.gasContract)">
            <img :src="menu.gasContract.url" />
          </dt>
          <dd>{{menu.gasContract.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.normativeEnvironment)">
            <img :src="menu.normativeEnvironment.url" />
          </dt>
          <dd>{{menu.normativeEnvironment.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.gasTransfer)">
            <img :src="menu.gasTransfer.url" />
          </dt>
          <dd>{{menu.gasTransfer.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.refuseDisposal)">
            <img :src="menu.refuseDisposal.url" />
          </dt>
          <dd>{{menu.refuseDisposal.label}}</dd>
        </dl>
        <dl class="link">
          <wx-open-launch-weapp class="openWx" id="gasInstall-launch-btn" :appid="appid" :username="username" path="pages/index/index">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-launch-weapp>
          <dt>
            <img :src="menu.gasAccount.url" />
          </dt>
          <dd>{{menu.gasAccount.label}}</dd>
        </dl>
        <!-- <dl>
          <dt @click="detail(menu.workInfo)">
            <img :src="menu.workInfo.url" />
          </dt>
          <dd>{{menu.workInfo.label}}</dd>
        </dl> -->
        <!-- <dl>
          <dt @click="detail(menu.audit)">
            <img :src="menu.audit.url" />
          </dt>
          <dd>{{menu.audit.label}}</dd>
        </dl> -->
      </div>
      <!-- 工商业务 -->
      <div class="entrance" v-show="indexSelect==1">
        <dl class="link">
          <wx-open-launch-weapp class="openWx" id="firmGasInstall-launch-btn" :appid="appid" :username="username" path="pages/index/index.html">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-launch-weapp>
          <dt>
            <img :src="menu.firmGasInstall.url" />
          </dt>
          <dd>{{menu.firmGasInstall.label}}</dd>
        </dl>
        <dl class="link">
          <wx-open-launch-weapp class="openWx" id="firmOpenUrl-launch-btn" :appid="appid" :username="username" path="pages/index/index.html">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-launch-weapp>
          <dt>
            <img :src="menu.firmOpenUrl.url" />
          </dt>
          <dd>{{menu.firmOpenUrl.label}}</dd>
        </dl>
        <!-- <wx-open-launch-weapp class="openWx" id="firmGasInstall-launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html">
          <script type="text/wxtag-template">
            <div style="height: 60px; width: 100%; text-align:center; ">
              <div style="height: 30px; width: 30px; margin: 0 auto; ">
                <img src="https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/img/test.png" style="display: block; height: 100%; width: 100%;" />
              </div>
              <div style="height: 16px; line-height: 16px;margin-top: 15px; font-size: 13px; color: #444; ">我要开户</div>
            </div>
          </script>
        </wx-open-launch-weapp>
        <wx-open-launch-weapp class="openWx" id="firmOpenUrl-launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html">
          <script type="text/wxtag-template">
            <div style="height: 60px; width: 100%; text-align:center; ">
              <div style="height: 30px; width: 30px; margin: 0 auto; ">
                <img src="https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/img/test.png" style="display: block; height: 100%; width: 100%;" />
              </div>
              <div style="height: 16px; line-height: 16px;margin-top: 15px; font-size: 13px; color: #444; ">燃气缴费</div>
            </div>
          </script>
        </wx-open-launch-weapp> -->
        <dl>
          <dt @click="detail(menu.transferTips)">
            <img :src="menu.transferTips.url" />
          </dt>
          <dd>{{menu.transferTips.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.invoice)">
            <img :src="menu.invoice.url" />
          </dt>
          <dd>{{menu.invoice.label}}</dd>
        </dl>
        <!-- <wx-open-launch-weapp class="openWx" id="invoice-launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html">
          <script type="text/wxtag-template">
            <div style="height: 60px; width: 100%; text-align:center; ">
              <div style="height: 30px; width: 30px; margin: 0 auto; ">
                <img src="https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/img/test.png" style="display: block; height: 100%; width: 100%;" />
              </div>
              <div style="height: 16px; line-height: 16px;margin-top: 15px; font-size: 13px; color: #444; ">发票申请</div>
            </div>
          </script>
        </wx-open-launch-weapp> -->
      </div>
    </div>
    <!-- <div @click="clearId">
      清除id
    </div> -->
    <!-- 广告 -->
    <div class="advertisingBox">
      <img :src="advertisingUrl" />
    </div>
    <!-- <wx-open-launch-weapp id="launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html" @launch="handleLaunchFn" @error="handleErrorFn" style="display: block;height: 40px; width: 100%;background: #f60;">
      <script type="text/wxtag-template">
        <div style="height: 40px; width: 100%; background: #ccc;">
        小程序打开
      </div>
    </script>
    </wx-open-launch-weapp> -->
    <!-- 综合业务 -->
    <div class="synthesize contentBox">
      <div class="title">
        <div>综合业务</div>
      </div>
      <!-- <div class="entrance">
        <dl class="" v-for="(item,index) in synthesizeList" :key="index">
          <dt @click="goDetail(item)">
            <img :src="item.url" />
          </dt>
          <dd>{{item.label}}</dd>
        </dl>
      </div> -->
      <div class="entrance">
        <!-- <dl class="link">
          <wx-open-launch-weapp class="openWx" id="stopInquiry-launch-btn" :appid="appid" :username="username" path="pages/index/index.html">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-launch-weapp>
          <dt>
            <img :src="menu.stopInquiry.url" />
          </dt>
          <dd>{{menu.stopInquiry.label}}</dd>
        </dl> -->
        <!-- <wx-open-launch-weapp class="openWx" id="stopInquiry-launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html">
          <script type="text/wxtag-template">
            <div style="height: 60px; width: 100%; text-align:center; ">
              <div style="height: 30px; width: 30px; margin: 0 auto; ">
                <img src="https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/img/test.png" style="display: block; height: 100%; width: 100%;" />
              </div>
              <div style="height: 16px; line-height: 16px;margin-top: 15px; font-size: 13px; color: #444; ">停气查询</div>
            </div>
          </script>
        </wx-open-launch-weapp> -->
        <dl>
          <dt @click="detail(menu.troubleshooting)">
            <img :src="menu.troubleshooting.url" />
          </dt>
          <dd>{{menu.troubleshooting.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.gasOperation)">
            <img :src="menu.gasOperation.url" />
          </dt>
          <dd>{{menu.gasOperation.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.recognize)">
            <img :src="menu.recognize.url" />
          </dt>
          <dd>{{menu.recognize.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.gasInvoicing)">
            <img :src="menu.gasInvoicing.url" />
          </dt>
          <dd>{{menu.gasInvoicing.label}}</dd>
        </dl>
        <!-- <wx-open-launch-weapp class="openWx" id="gasInvoicing-launch-btn" appid="wx2082cbdc25b3b8e6" username="gh_31841eba8160" path="pages/index/index.html">
          <script type="text/wxtag-template">
            <div style="height: 60px; width: 100%; text-align:center; ">
              <div style="height: 30px; width: 30px; margin: 0 auto; ">
                <img src="https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/img/test.png" style="display: block; height: 100%; width: 100%;" />
              </div>
              <div style="height: 16px; line-height: 16px;margin-top: 15px; font-size: 13px; color: #444; ">气费开票</div>
            </div>
          </script>
        </wx-open-launch-weapp> -->
        <!--<dl>
          <dt @click="detail(menu.filePublicity)">
            <img :src="menu.filePublicity.url" />
          </dt>
          <dd>{{menu.filePublicity.label}}</dd>
        </dl>-->
        <!--<dl>
          <dt @click="detail(menu.spotArrangement)">
            <img :src="menu.spotArrangement.url" />
          </dt>
          <dd>{{menu.spotArrangement.label}}</dd>
        </dl>-->
        <dl>
          <dt @click="detail(menu.safeGas)">
            <img :src="menu.safeGas.url" />
          </dt>
          <dd>{{menu.safeGas.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.mailbox)">
            <img :src="menu.mailbox.url" />
          </dt>
          <dd>{{menu.mailbox.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.workerInformation)">
            <img :src="menu.workerInformation.url" />
          </dt>
          <dd>{{menu.workerInformation.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.securityCheck)">
            <img :src="menu.securityCheck.url" />
          </dt>
          <dd>{{menu.securityCheck.label}}</dd>
        </dl>
        <dl>
          <dt @click="detail(menu.meterReservation)">
            <img :src="menu.meterReservation.url" />
          </dt>
          <dd>{{menu.meterReservation.label}}</dd>
        </dl>
<!--  新增：气表首检信息查询跳转链接      -->
        <dl>
          <dt @click="outerLink()">
            <img :src="menu.checkInfoSearch.url" />
          </dt>
          <dd>{{menu.checkInfoSearch.label}}</dd>
        </dl>
<!--        新增：业务进度查询，跳转小程序-->
        <dl class="link">
          <wx-open-launch-weapp class="openWx" id="gasInstall-launch-btn" :appid="appid" :username="username" path="package-works/pages/index">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-launch-weapp>
          <dt>
            <img :src="menu.processSearch.url" />
          </dt>
          <dd>{{menu.processSearch.label}}</dd>
        </dl>
        <dl class="link">
          <wx-open-subscribe class="openWx" :class="isSubscribeSatisfaction?'openSUbscribe':''" :template="satisfactionTemplate" id="subscribe-btn" ref="subscribeBtnSatisfaction">
            <script type="text/wxtag-template">
              <div style="height: 60px; width: 100%;"></div>
            </script>
          </wx-open-subscribe>
          <dt @click="detail(menu.satisfaction)">
            <img :src="menu.satisfaction.url" />
          </dt>
          <dd>{{menu.satisfaction.label}}</dd>
        </dl>

        <!-- <dl>
          <dt @click="detail(menu.menus)">
            <img :src="menu.menus.url" />
          </dt>
          <dd>{{menu.menus.label}}</dd>
        </dl> -->
      </div>
    </div>
    <!-- 联系方式 -->
    <FooterTel></FooterTel>
    <!--  -->
    <!-- <ul class="footer">
      <li>店铺主页</li>
      <li>个人中心</li>
      <li>关注我们</li>
      <li>店铺信息</li>
    </ul> -->
  </view>
</template>

<script>
// import js from 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'
import axios from "axios";
import Swiper from './components/Swiper.vue'
import FooterTel from '../components/footerTel.vue'
import { requestApi, appId, fileURL } from "@/utils/config";
import wx from "jweixin-module";
import menuList from "@/utils/menu";

export default {
  components: {
    Swiper,
    FooterTel
  },
  data () {
    return {
      icon: require('@/static/image/notificationIcon.png'),
      navList: [{
        value: '',
        label: '居民业务'
      }, {
        value: '',
        label: '工商业务'
      }],
      indexSelect: 0,
      // 居民业务
      residentList: [{
        url: require('@/static/image/aqrqIcon.png'),
        label: '停气通知',
        router: '/pages/gasStop/index'
      }, {
        url: require('@/static/image/aqrqIcon.png'),
        label: '燃气报装',
        router: '/pages/gasInstall/index'
      }, {
        url: require('@/static/image/ktrqIcon.png'),
        label: '新点火通气',
        router: '/pages/ignitionGas/index'
      }, {
        url: require('@/static/image/rqghIcon.png'),
        label: '停开申请',
        router: '/pages/gasApplyFor/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '管道改装',
        router: '/pages/pipelineModification/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '燃气缴费',
        event: 'openUrl'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '燃气退租',
        router: '/pages/gasQuit/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '采暖申请',
        router: '/pages/heatingApplyFor/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '阶梯气价申请',
        router: '/pages/ladderApplyFor/index',
        isCode: true
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '一户多人口增加气量申请',
        router: '/pages/multiPeopleAddGasApplyFor/index',
        isCode: true
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '低保用户气价办理申请',
        router: '/pages/lowIncomeGasApplyFor/index',
        isCode: true
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '补卡须知',
        router: '/pages/reissueTips/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '用气合同',
        router: '/pages/gasContract/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '用气环境规范',
        router: '/pages/normativeEnvironment/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '居民过户',
        router: '/pages/gasTransfer/index'
        // }, {
        //   url: require('@/static/image/keyIcon.png'),
        //   label: '燃气保险'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '垃圾处置费',
        router: '/pages/refuseDisposal/index'
        // }, {
        //   url: require('@/static/image/keyIcon.png'),
        //   label: '获取Code',
        //   event: 'code'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '员工信息',
        router: '/pages/workInfo/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '打开小程序',
        event: 'xcx'
      }],
      // 工商业务
      commerceList: [{
        url: require('@/static/image/keyIcon.png'),
        label: '燃气报装'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '燃气缴费'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '过户须知',
        router: '/pages/transferTips/index'
      }, {
        url: require('@/static/image/keyIcon.png'),
        label: '发票申请'
        // }, {
        //   url: require('@/static/image/keyIcon.png'),
        //   label: '更名须知'
        // }, {
        //   url: require('@/static/image/keyIcon.png'),
        //   label: '发票申请'
        // }, {
        //   url: require('@/static/image/keyIcon.png'),
        //   label: '气费退款'
      }],
      menu: menuList,
      selectList: [],
      // 广告
      advertisingUrl: require('@/static/image/advertising.jpg'),
      // 综合业务
      synthesizeList: [{
        url: require('@/static/image/tqcxIcon.png'),
        label: '停气查询'
      }, {
        url: require('@/static/image/gzpcIcon.png'),
        label: '故障排查',
        router: '/pages/troubleshooting/index'
      }, {
        url: require('@/static/image/qbsyIcon.png'),
        label: '气表使用'
      }, {
        url: require('@/static/image/ygsbIcon.png'),
        label: '员工识别'
      }, {
        url: require('@/static/image/pukpIcon.png'),
        label: '气费开票'
      },
      // {
      //   url: require('@/static/image/zpcxIcon.png'),
      //   label: '专票查询'
      // }, 
      {
        url: require('@/static/image/jggsIcon.png'),
        label: '文件公示'
      }, {
        url: require('@/static/image/sdapIcon.png'),
        label: '设点安排'
        // }, {
        //   url: require('@/static/image/kwywIcon.png'),
        //   label: '开挖业务'
      }, {
        url: require('@/static/image/aqyqIcon.png'),
        label: '安全用气'
      }],
      wechatCode: null,
      openId: null,
      formData: {
        pageNum: 1,
        pageSize: 20,
        status: 1, // 请求启用状态的数据
      },
      messageList: '',
      bannerList: [],
      appid: 'wx2082cbdc25b3b8e6',
      username: 'gh_31841eba8160',
      // template: 'oG_xqQoCkvIoxPIS-KxTrGjC6N8CnRgne9GOYX91QJo',
      // appid: 'wxdf84dc23da1732a3',
      // username: 'gh_0e3469d32301',
      template: 'ITrqx4irPZLlbc0E3A4hPSuZopgetKk48sAt5UzMZrI',
      satisfactionTemplate:'KaZZBxSwe0E-YcgragYaKLzwqmZ-WH8ixoS43RhKq9M',
      isSubscribe: false, //是否已订阅
      isSubscribeSatisfaction: false, //是否已订阅满意度评价
    };
  },
  async onShow () {
    var vm = this;
  },
  onLoad: async function (options) {
    var vm = this;
    vm.selectList = vm.residentList
    // wx-open-subscribe 原生绑定点击事件
    // 停气通知
    vm.$nextTick(() => {
      var btn = vm.$refs.subscribeBtn;
      btn.addEventListener('success', ({detail}) => {
        vm.clickSubscribe(detail)
      });
      btn.addEventListener('error', ({detail}) => {
        vm.clickSubscribe(detail)
      });
    })
    // 满意度评价
    vm.$nextTick(() => {
      var btn = vm.$refs.subscribeBtnSatisfaction;
      btn.addEventListener('success', ({detail}) => {
        vm.clickSubscribeSatisfaction(detail)
      });
      btn.addEventListener('error', ({detail}) => {
        vm.clickSubscribeSatisfaction(detail)
      });
    })
  },
  async onUnload () {
  },
  async onHide () {
  },
  mounted () {
    var vm = this;
    vm.getSignature()
    vm.getBanner()
    vm.getMsg()
    vm.getSubscribe(true)
    vm.getSubscribeSatisfaction(true)
  },
  methods: {
    clickSubscribe (val) {
      var vm = this;
      // alert(JSON.stringify(val));
      let temp = vm.template
      // const response = { "errMsg": "subscribe:ok", "subscribeDetails": "{\"oG_xqQoCkvIoxPIS-KxTrGjC6N8CnRgne9GOYX91QJo\":\"{\\\"status\\\":\\\"reject\\\"}\"}" };
      const { subscribeDetails } = val;
      const parsedSubscribeDetails = JSON.parse(subscribeDetails);
      const status = parsedSubscribeDetails[temp];
      const name = JSON.parse(status).status
      // 拒绝
      if (name === 'reject') {
        // alert('拒绝')
      }
      // 同意
      if (name === 'accept') {
        // alert('同意')
        if (!uni.getStorageSync('openId')) {
          uni.setStorageSync('routerUrl', '/pages/gasStop/index')
          vm.func.showToast('正在获取相关信息')
          setTimeout(function () {
            uni.redirectTo({
              url: '/pages/getCode/index?pageType=index'
            });
          }, 1000)
        }
        vm.tui.request('/api/subscribeopenid/add', 'post', { 'openid': uni.getStorageSync('openId'), 'type': temp }, false, false, false).then((res) => {
          const id = 'openid:' + uni.getStorageSync('openId')
          // alert(id)
          // alert(JSON.stringify(res))
          vm.getSubscribe(false)
        }).catch((e) => {
          alert(e)
        })
      }
    },
    clickSubscribeSatisfaction (val) {
      var vm = this;
      let temp = vm.satisfactionTemplate
      // alert(JSON.stringify(val));
      const { subscribeDetails } = val;
      const parsedSubscribeDetails = JSON.parse(subscribeDetails);
      const status = parsedSubscribeDetails[temp];
      const name = JSON.parse(status).status
      // 拒绝
      if (name == 'reject') {
        // alert('拒绝')
      }
      // 同意
      if (name == 'accept') {
        // alert('同意')
        if (!uni.getStorageSync('openId')) {
          uni.setStorageSync('routerUrl', '/pages/gasStop/index')
          vm.func.showToast('正在获取相关信息')
          setTimeout(function () {
            uni.redirectTo({
              url: '/pages/getCode/index?pageType=index'
            });
          }, 1000)
        }
        vm.tui.request('/api/subscribeopenid/add', 'post', { 'openid': uni.getStorageSync('openId'),'type': temp }, false, false, false).then((res) => {
          const id = 'openid:' + uni.getStorageSync('openId')
          // alert(id)
          // alert(JSON.stringify(res))
          vm.getSubscribeSatisfaction(false)
        }).catch((e) => {
          alert(e)
        })
      }
    },
    // 获取签名（跳转小程序）
    getSignature () {
      var vm = this
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      let url = requestApi + '/'
      vm.tui.request('/api/wx/getsignatureconf', 'get', { url: url }, false, false, true).then((res) => {
        let signature = res.signature.split('=')
        let last = signature[signature.length - 1]
        let a = signature[2]
        let b = a.split(',')
        // console.log('------------------', b[0]);
        // console.log('++++++++++++++', res.signature.split('='))
        vm.$jweixin.config({
          debug: false, // 调试时可开启
          appId: appId, // <!-- replace -->
          timestamp: Number(res.timestamp), // 必填，填任意数字即可
          nonceStr: b[0], // 必填，填任意非空字符串即可
          signature: last.substring(0, last.length - 1), // 必填，填任意非空字符串即可
          jsApiList: ['previewImage', 'chooseImage'],// 必填，随意一个接口即可
          openTagList: ["wx-open-launch-weapp", "wx-open-subscribe"], // 填入打开小程序的开放标签名
        });
        uni.hideLoading()
      }).catch((e) => { })
    },
    //获取是否已经订阅了推送消息
    async getSubscribe (val) {
      var vm = this, data = null
      if (!uni.getStorageSync('openId') && !val) {
        uni.setStorageSync('routerUrl', '/pages/gasStop/index')
        vm.func.showToast('正在获取相关信息')
        setTimeout(function () {
          uni.redirectTo({
            url: '/pages/getCode/index?pageType=index'
          });
        }, 1000)
      }
      vm.tui.request('/api/subscribeopenid/list', 'POST', { 'openid': uni.getStorageSync('openId'),'type': vm.template }, false, false, val).then((res) => {
        if (res.code === 200) {
          data = res.data.length ? res.data[0].status : null
          vm.isSubscribe = data == 1 ? true : false
          if (!val && data === 1) {
            vm.func.showToast('正在获取相关信息')
            setTimeout(function () {
              vm.func.goto('/pages/gasStop/index')
            }, 1000)
          }
        }
      }).catch((e) => { })
    },
    //获取是否已经订阅了推送消息
    async getSubscribeSatisfaction (val) {
      var vm = this, data = null
      if (!uni.getStorageSync('openId') && !val) {
        uni.setStorageSync('routerUrl', '/pages/gasStop/index')
        vm.func.showToast('正在获取相关信息')
        setTimeout(function () {
          uni.redirectTo({
            url: '/pages/getCode/index?pageType=index'
          });
        }, 1000)
      }
      vm.tui.request('/api/subscribeopenid/list', 'POST', { 'openid': uni.getStorageSync('openId'),'type': vm.satisfactionTemplate }, false, false, val).then((res) => {
        if (res.code == 200) {
          data = res.data.length ? res.data[0].status : null
          vm.isSubscribeSatisfaction = data == 1 ? true : false
          if (!val && data == 1) {
            vm.func.showToast('正在获取相关信息')
            setTimeout(function () {
              vm.func.goto('/pages/satisfaction/index')
            }, 1000)
          }
        }
      }).catch((e) => { })
    },
    //获取滚动消息
    async getMsg () {
      var vm = this, data = []
      vm.tui.request('/api/message/list_h5', 'POST', vm.formData, false, false, true).then((res) => {
        if (res.code == 200) {
          for (let i = 0; i < res.data.length; i++) {
            data.push(res.data[i].title)
          }
          vm.messageList = data.toString()
        }
      }).catch((e) => { })
    },
    // 获取广告
    getBanner () {
      var vm = this, list = []
      vm.tui.request('/api/banner/list_h5', 'POST', vm.formData, false, false, true).then((res) => {
        if (res.code == 200) {
          for (let i = 0; i < res.data.length; i++) {
            list.push(fileURL + '/' + res.data[i].imgPath)
          }
          vm.bannerList = list
        }
      }).catch((e) => { })
    },
    navClick (item, index) {
      var vm = this;
      vm.indexSelect = index
      vm.selectList = index ? vm.commerceList : vm.residentList
    },
    detail (item) {
      var vm = this;
      console.log('item', item);
      if (item.hasOwnProperty('link') && item.link) {
        window.open(item.link, '_blank');
        return
      }
      if (item.hasOwnProperty('router') && item.router) {
        if (item.hasOwnProperty('isCode') && item.isCode) {
          if (uni.getStorageSync('openId')) {
            vm.func.goto(item.router + '?title=' + item.label)
          } else {
            uni.setStorageSync('routerUrl', item.router) // 存储router，作为获取code后的跳转
            vm.func.goto('/pages/getCode/index')
          }
        } else {
          vm.func.goto(item.router + '?title=' + item.label)
        }
      }
    },
    goDetail (item) {
      var vm = this;
      if (item.event == 'code') {
      }
      if (item.event == 'openUrl') {
      }
      if (item.event == 'xcx') {
      }
      if (item.router) {
        vm.func.goto(item.router + '?title=' + item.label)
      }
    },
    outerLink() {
      window.open('https://www.cqjz.com.cn/', '_self')
    },
    // handleLaunchFn (val) {
    //   var vm = this;
    //   alert(JSON.stringify(val))
    // },
    // handleErrorFn (val) {
    //   var vm = this;
    //   alert(JSON.stringify(val))
    // },
    clearId () {
      uni.setStorageSync('openId', '')
    },
  },
  onPageScroll (e) {
  },

  async onPullDownRefresh () {
  },
  onReachBottom () {
  },
};
</script>

<style lang="scss" scoped>
.index-box {
  height: 100%;
  width: 100%;
  background: #f2f2f2;
  padding-bottom: 20px;
  // 通知
  .notification {
    height: 73px;
    width: 100%;
    padding: 10px 14px 14px;
    // background: #f60;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .icon {
      height: 100%;
      width: 56px;
      background: #dce7ff;
      border-radius: 4px 0 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 26px;
        height: 26px;
      }
    }
    .content {
      width: calc(100% - 56px);
      ::v-deep .uni-noticebar {
        padding: 14px 14px 14px 0;
        margin: 0;
      }
      .vanNotice {
        width: auto;
        border-radius: 0 4px 4px 0;
        font-size: 15px;
        ::v-deep .van-icon__image {
          width: 22px;
          height: 22px;
          margin-right: 12px;
        }
        ::v-deep .uni-noticebar__content-text {
          font-size: 15px !important;
        }
      }
    }
  }
  //
  .contentBox {
    border-radius: 18px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 24px #e7e7e7;
  }
  //居民、工商业务
  .business {
    margin: 14px;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 1) 90%,
      rgba(235, 241, 255, 1) 100%
    );
    position: relative;
    .nav {
      width: 100%;
      height: 46px;
      padding: 0;
      font-size: 18px;
      color: #666;
      font-weight: bold;
      line-height: 28px;
      display: flex;
      position: relative;
      z-index: 99;
      box-sizing: border-box;
      li {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          display: inline-block;
          padding: 2px 0;
        }
      }
      .navSelect {
        padding: 0 6px;
        font-size: 20px;
        color: #000;
        background: url("../../static/image/titleBjIcon.png") no-repeat left
          bottom;
        background-size: 100%;
      }
    }
    .navBj {
      position: absolute;
      top: -16px;
      width: 100%;
      height: 70px;
      z-index: 1;
      > div {
        width: 100%;
        height: 100%;
      }
    }
    .leftBj {
      > div {
        background: url("../../static/image/leftBj.png") no-repeat left top;
        background-size: 55%;
      }
    }
    .rightBj {
      > div {
        background: url("../../static/image/rightBj.png") no-repeat right top;
        background-size: 55%;
      }
    }
  }
  .business,
  .synthesize {
    .entrance {
      display: flex;
      flex-wrap: wrap;
      padding: 0 6px 24px;
      dl {
        width: 25%;
        font-size: 13px;
        text-align: center;
        color: #444;
        margin-top: 24px;
      }
      dl {
        dt,
        dd {
          width: 100%;
        }
        img {
          width: 38px;
          height: 38px;
        }
        dd {
          padding-top: 6px;
        }
      }
    }
  }
  // 广告
  .advertisingBox {
    width: calc(100% - 28px);
    height: 130px;
    margin: 0 14px;
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 综合业务
  .synthesize {
    margin: 14px;
    .title {
      display: inline-block;
      padding: 0 6px;
      margin: 12px 18px 0;
      line-height: 26px;
      font-size: 20px;
      color: #000;
      font-weight: bold;
      background: url("../../static/image/titleBjIcon.png") no-repeat left
        bottom;
      background-size: 100%;
    }
    .entrance {
      dl {
        img {
          width: 32px;
          height: 32px;
          opacity: 0.8;
        }
      }
    }
  }
  //
  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #666;
    padding: 12px 0;
    box-sizing: border-box;
    li {
      padding: 0 10px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        height: 12px;
        width: 1px;
        left: 0px;
        top: 4px;
        background: #e2e2e2;
      }
      &:first-child {
        &::before {
          width: 0;
        }
      }
    }
  }
  // 跳转小程序定位样式
  .link {
    position: relative;
    .openWx {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
    }
    .subscribeLink {
      background: rgba(0, 0, 0, 0.05);
    }
    .openSUbscribe {
      background: rgba(0, 0, 0, 0);
      z-index: -1 !important;
    }
  }
}
</style>
<style>
page {
  font-family: PingFang;
  background-color: #fff;
}
</style>
